<template>
  <div class="orderApply">
    <!-- 搜索栏 -->
    <div class="right">
      <el-form :model="queryParam" ref="queryParam" inline>
        <el-form-item label="状态:" label-width="100px" prop="status">
          <el-select v-model="queryParam.status" placeholder="请选择状态" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList()">搜索</el-button>
          <el-button @click="resetForm('queryParam');">重置</el-button>
          <el-button type="primary" @click="dialogOrderApplySms()">修改售后通知接收人</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card class="box-card">
      <div class="boxcard-body">
        <div class="tableList">
          <el-table :data="list" border style="width: 100%">
            <el-table-column type="index" label="排序" width="50"></el-table-column>
            <el-table-column prop="orderNo" label="订单编号" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="customerName" label="客户名字" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="customerName" label="推荐人" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="applyType" label="申请类型" width="100" show-overflow-tooltip>
              <template slot-scope="scope">{{ applyType[scope.row.applyType] }}</template>
            </el-table-column>
            <el-table-column label="状态" width="130" show-overflow-tooltip>
              <template slot-scope="scope">{{ getStatus(scope.row.status) }}</template>
            </el-table-column>
            <el-table-column prop="remark" label="申请内容" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="imageUrls" label="售后申请图片" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-image
                  v-for="imageUrl in scope.row.imageUrls"
                  :src="imageUrl"
                  :key="imageUrl"
                  style="width:60px;height:60px"
                  :preview-src-list="[imageUrl]"
                />
              </template>
            </el-table-column>
            <el-table-column prop="applyDate" label="申请日期" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="handleType" label="处理类型" width="100" show-overflow-tooltip>
              <template slot-scope="scope">{{ handleType[scope.row.handleType] }}</template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button @click="dialogField(scope.row)" type="text" size="small">详情</el-button>
                <el-button
                  v-if="scope.row.status == 2"
                  @click="sendDialog(scope.row)"
                  type="text"
                  size="small"
                >发货</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="pageChange"
              :total="total"
              :current-page.sync="pageNum"
              :page-sizes="[10, 20]"
              :page-size="10"
              layout="total, sizes, prev, pager, next"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 详情弹窗 -->
    <div>
      <orderDetail v-bind:id="id" v-bind:visible.sync="dialogFieldBox"></orderDetail>
    </div>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
import orderDetail from "@/views/order/orderDetail";

export default {
  components: { orderDetail },
  data() {
    return {
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      queryParam: {
        status: null
      },

      // 弹窗相关属性
      dialogFieldBox: false,
      id: "",
      statusList: [],
      applyType: {
        1: "我要退款(无需退货)",
        2: "退货退款",
        3: "换货"
      },
      handleType: {
        1: "已发货",
        2: "已退款",
        3: "已拒绝"
      },
      visableOrderApplySms: false
    };
  },
  created() {
    this.ininDict();
    if (this.$route.query.customerId) {
      this.queryParam.customerId = this.$route.query.customerId;
    }
    this.getList();
  },
  activated() {
    if (this.$route.query.customerId) {
      this.queryParam.customerId = this.$route.query.customerId;
      this.getList();
    }
  },
  computed: {},
  methods: {
    async ininDict() {
      await get("orderapply/orderApplyStatus").then(res => {
        this.statusList = res.data.data;
      });
    },
    getStatus(status) {
      for (let i = 0; i < this.statusList.length; i++) {
        if (this.statusList[i].key == status) {
          return this.statusList[i].label;
        }
      }
      return "";
    },
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList() {
      let param = {
        status: this.queryParam.status,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      get("/orderapply/pageOrderapply", param).then(res => {
        this.list = res.data.data.list;
        // 自定义下标
        this.list.forEach((e, idx) => {
          e.idx = (idx + 1) * this.pageNum;
          if (e.imageUrls) {
            e.imageUrls = JSON.parse(e.imageUrls);
          }
        });

        this.total = Number.parseInt(res.data.data.total);
        this.pageNum = res.data.data.pageNum;
      });
    },

    // 编辑按钮打开编辑字段弹窗
    dialogField(e) {
      this.dialogFieldBox = true;
      this.id = e.orderId;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "queryParam") {
        this.getList();
      }
    },
    dialogOrderApplySms() {
      this.$https.get("orderapply/getOrderApplySms", {}).then(res => {
        let jsonData = "";
        if (res.data.data) {
          jsonData = res.data.data.jsonData;
        }
        this.$prompt("请输入接收手机号", "售后通知接收人", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputValue: jsonData,
          inputPattern: /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/,
          inputErrorMessage: "手机格式不正确"
        })
          .then(({ value }) => {
            this.$https
              .postXform("orderapply/saveOrderApplySms", { jsonData: value })
              .then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功"
                });
              });
          })
          .catch(() => {});
      });
    }
  }
};
</script>

<style lang="less">
</style>
